<template>
  <view class="container">
    <unicloud-db ref="udb" v-slot:default="{data, pagination, loading, hasMore, error}" :collection="collectionList"
      field="article_id,user_id,publish_date">
      <view v-if="error">{{error.message}}</view>
      <view v-else-if="data">
        <uni-list>
          <uni-list-item v-for="(item, index) in data.filter(item => item.article_id.length != 0)" :key="index"
            showArrow :clickable="true" @click="handleItemClick(item.article_id[0]._id)">
            <template v-slot:body>
              <uni-section class="mb-10" :title="'标题：'+item.article_id[0].title"
                :sub-title="'作者：'+ item.user_id[0].username">
              </uni-section>
            </template>
          </uni-list-item>
        </uni-list>
      </view>
      <uni-load-more :status="loading?'loading':(hasMore ? 'more' : 'noMore')"></uni-load-more>
    </unicloud-db>
  </view>
</template>

<script>
  const db = uniCloud.database()
  export default {
    data() {
      return {
        collectionList: [
          db.collection("pyq_like").where(`user_id == $cloudEnv_uid `).getTemp(),
          db.collection("pyq_article").where(`delState != true`).field("_id,title,user_id").getTemp(),
          db.collection("uni-id-users").field("_id,username,nickname").getTemp()
        ],
        loadMore: {
          contentdown: '',
          contentrefresh: '',
          contentnomore: ''
        }
      }
    },
    mounted() {
      // console.log(this.collectionList)
    },
    onPullDownRefresh() {
      this.$refs.udb.loadData({
        clear: true
      }, () => {
        uni.stopPullDownRefresh()
      })
    },
    onReachBottom() {
      this.$refs.udb.loadMore()
    },
    methods: {
      getUserDate(userID) {
        db.collection("uni-id-users").where(`_id == "${userID}"`).field("username,nickname").get().then(res => {
          return res.result.data[0].username
        })
      },
      handleItemClick(id) {
        uni.navigateTo({
          url: '/pages/detail/detail?id=' + id
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    :deep(.uni-list-item__container) {
      padding: 0;
    }
  }
</style>
